<script setup lang="ts">
import { postMarCouponExportIdApi } from '@/services/my'
import { useMemberStore } from '@/stores'
import { Toast, extractQueryParams } from '@/utils/tools'
import { ref } from 'vue'
const memberStore = useMemberStore()
const inviteFriendsFn = () => {
  if (memberStore.userInfo) {
    uni.navigateTo({
      url: '/pagesMy/InviteFriends/InviteFriends',
    })
  } else {
    emit('open')
  }
}
const emit = defineEmits<{
  (e: 'open'): void
}>()
// 弹窗
const ActivityPopupRef = ref()
/** 触发扫码 */
const writeOff = () => {
  if (!memberStore.token) {
    emit('open')
    return
  }
  uni.scanCode({
    success: async (res: UniApp.ScanCodeSuccessRes) => {
      // 兼容老版本
      if (res?.result?.startsWith('EXP-')) {
        const r = await postMarCouponExportIdApi(res?.result)
        return Toast(r.code === 200 ? '优惠券已到账' : r?.msg)
      }
      // 新版本
      const res0 = extractQueryParams(res?.result)
      console.log('res0', res0)
      if (!res0?.exportId?.startsWith('EXP-')) {
        Toast('请扫描正确的二维码')
        return
      }
      const res1 = await postMarCouponExportIdApi(res0.exportId)
      Toast(res1.code === 200 ? '优惠券已到账' : res1?.msg)
    },
  })
}
</script>

<template>
  <view class="userFeature">
    <view>
      <view @tap="inviteFriendsFn" v-if="false" class="Feature">
        <image class="_image" src="/static/images/yaoqinghaoyou.png" mode="scaleToFill" />邀请好友
        <text class="FeatureText">送专属优惠券</text> <text class="iconfont icon-right"></text
      ></view>
      <view hover-class="view-hover" class="Feature" @tap="writeOff()">
        <image class="_image" src="/static/images/my/icon_2.png" mode="scaleToFill" />卡券核销
        <text class="iconfont icon-right"></text>
      </view>
      <navigator
        hover-class="view-hover"
        :url="`/pagesMy/userServiceAndSettings/userServiceAndSettings?title=服务中心`"
        class="Feature"
      >
        <image class="_image" src="/static/images/my/icon_5.png" mode="scaleToFill" />服务中心<text
          class="iconfont icon-right"
        ></text
      ></navigator>
      <view hover-class="view-hover" class="Feature" @tap="ActivityPopupRef?.open()">
        <image class="_image" src="/static/images/my/icon_4.png" mode="scaleToFill" />关注我们
        <text class="iconfont icon-right"></text>
      </view>
      <navigator
        hover-class="view-hover"
        :url="`/pagesMy/userServiceAndSettings/userServiceAndSettings?title=更多设置`"
        class="Feature"
      >
        <image class="_image" src="/static/images/my/icon_3.png" mode="scaleToFill" />更多设置<text
          class="iconfont icon-right"
        ></text
      ></navigator>
    </view>
    <BjsActivityPopup ref="ActivityPopupRef" :flag="true" />
  </view>
</template>

<style lang="scss">
.userFeature {
  background-color: #fff;
  margin: 0 24rpx;
  border-radius: 20rpx;
  padding: 24rpx 40rpx 24rpx 54rpx;
}
.Feature {
  position: relative;
  width: 100%;
  height: 96rpx;
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: #000;
  .FeatureText {
    position: absolute;
    right: 80rpx;
  }
  ._image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 28rpx;
  }
  .iconfont {
    position: absolute;
    font-size: 40rpx;
    right: 0rpx;
  }
}
</style>
